<template>
  <div
    class="container mx-auto bg-white w-full flex flex-col gap-5 px-3 md:px-16 lg:px-28 md:flex-row text-[#161931]"
  >
    <main class="w-full min-h-screen py-1 md:w-2/3 lg:w-3/4">
      <div class="p-2 md:p-4">
        <div class="w-full px-6 pb-8 mt-8 sm:max-w-xl sm:rounded-lg">
          <h2 class="text-2xl font-bold sm:text-xl mb-2">
            Профиль пользователя
          </h2>
          <AppLoader
            class="mx-auto"
            v-if="pending"
          />
          <div
            v-else-if="error"
            class="bg-red-200 rounded text-red-500 p-4"
          >
            {{ error }}
          </div>
          <div
            v-else
            class="grid max-w-2xl mx-auto mt-8"
          >
            <div
              class="flex flex-col items-center space-y-5 sm:flex-row sm:space-y-0"
            >
              <img
                class="object-cover w-40 h-40 p-1 rounded-full ring-2 ring-indigo-300 dark:ring-indigo-500"
                :src="
                  user.picture
                    ? user.picture
                    : 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
                "
                alt="Bordered avatar"
              />

              <div
                v-if="!isCreate"
                class="flex flex-col space-y-1 sm:ml-8"
              >
                <div>Дата регистрации: {{ user.registered }}</div>
                <div>На сайте: {{ onSite }}</div>
                <div>Возраст: {{ age }}</div>
              </div>
            </div>

            <div class="items-center mt-8 sm:mt-14 text-[#202142]">
              <div
                class="flex flex-col items-center w-full mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0 sm:mb-6"
              >
                <div class="w-full">
                  <AppInput
                    v-model="user.name"
                    placeholder="Имя"
                    label="Имя"
                  />
                </div>

                <div class="w-full">
                  <AppInput
                    v-model="user.surname"
                    placeholder="Фамилия"
                    label="Фамилия"
                  />
                </div>
              </div>

              <div class="mb-2 sm:mb-6">
                <AppInput
                  v-model="user.gender"
                  placeholder="Пол"
                  label="Пол"
                />
              </div>

              <div class="mb-2 sm:mb-6">
                <AppInput
                  v-model="user.email"
                  placeholder="Email"
                  label="Email"
                />
              </div>

              <div class="mb-6">
                <AppInput
                  v-model="user.phone"
                  placeholder="Телефон"
                  label="Телефон"
                />
              </div>

              <div class="mb-6">
                <AppInput
                  v-model="user.address"
                  placeholder="Адрес"
                  label="Адрес"
                />
              </div>

              <div class="mb-6">
                <div class="relative max-w-sm">
                  <span class="mb-2 block text-sm text-indigo-500">
                    Дата рождения
                  </span>
                  <input
                    datepicker
                    v-model="user.birthday"
                    type="date"
                    class="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-indigo-700 dark:border-indigo-600 dark:placeholder-indigo-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Select date"
                  />
                </div>
              </div>

              <div class="mb-6">
                <AppCheckbox
                  v-model="user.isActive"
                  label="Активен"
                />
              </div>

              <div class="flex justify-end">
                <AppButton
                  v-if="isEditMode"
                  @click="update"
                >
                  Обновить
                </AppButton>
                <AppButton
                  v-else
                  @click="create"
                >
                  Создать
                </AppButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import type { User } from "@/types/user";
  // import { join } from "~/utils/date";
  const { getUser, createUser, updateUser } = useApi();

  const emptyUser = {
    id: "",
    isActive: false,
    picture: "",
    name: "",
    surname: "",
    gender: "",
    email: "",
    phone: "",
    address: "",
    registered: "",
    birthday: "",
  };

  const route = useRoute();
  const user = ref<User>(emptyUser);
  const id: string = route.params.id as string;

  const isEditMode = computed(
    () => Object.keys(route.query).includes("edit") && id !== "0"
  );

  const age = computed(() => {});

  const onSite = computed(() => {});

  const isCreate = id === "0";
  const { data, pending, error } = await getUser(id);
  user.value = isCreate ? emptyUser : data.value;

  const create = () => {
    createUser(user.value);
  };

  const update = () => {
    updateUser(user.value);
  };

  // let options = [
  //   { year: "numeric" },
  //   { month: "numeric" },
  //   { day: "numeric" },
  // ];
  // console.log(user.value.birthday);
  // console.log(new Date(user.value.birthday));
  // console.log(Date.parse(user.value.birthday));
  // let joined = join(new Date(user.value.birthday), options, "-");
  // user.value.birthday = joined;
</script>
